<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .gridView{
            width: 100px;
            height: 100px;
            border:1px solid #ccc;
            float: left;
            margin:20px;

        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <template id="control">
        <div style="border:1px solid #ccc;">
            
              <div style="margin: 5px;">
                <button @click="switchTab(false)">列表视图</button>
                <button  @click="switchTab(true)">网格试图</button>
                <input type="text" v-model="searchString" >
                <button @click="Sorting">切换顺序</button>
              </div>
              
        </div>
    </template>
    <script>
        const control={
            template:'#control',
            data() {
                return {
                    searchString: ''
                }
            },
            watch: {
                searchString(newVal, oldVal) {
                    console.log(newVal);
                    this.$emit("change-search-string", newVal)
                }
            },
            methods:{
                switchTab(flag){
                    this.$emit("change",flag)
                },
                Sorting(){
                    this.$emit("sorting-list-change")
                },
               
            },
           
        }
        Vue.component('control', control)
    </script>


<!-- 列表视图 -->
<template id="viewList">
    <div >
        <div style="border:1px solid #ccc;padding-left: 5px;">
        <div style="border-bottom:1px solid #ccc;" v-for="item in list">{{item.name}}</div>
     
        </div>
    </div>
</template>

<script>
    const viewList={
        template:'#viewList',
        props:{
            list:{
              type:Array
             
            },
        },
        // computed: {
        //         searchList(){
        //             return this.list.filter(item=>item.name.includes(this.keyword))
        //         }
        //     }
        
    }
    Vue.component('viewList', viewList)
</script>
<!-- 网格视图 -->
<template id="gridView">
    <div >
        <div style="border:1px solid #ccc;height: 500px;">
        <div class="gridView" v-for="item in list">{{item.name}}</div>
        </div>
    </div>
</template>
<script>
    const gridView={
        template:'#gridView',
        props:{
            list:{
              type:Array
             
            },
          
        },
        // computed: {
        //         searchList(){
        //             return this.list.filter(item=>item.name.includes(this.keyword))
        //         }
        //     },
    }
    Vue.component('gridView', gridView)
</script>




    <div id='app'>
        <div style="width: 800px;">
            <control @change="viewChange" @change-search-string="fatherData" @sorting-list-change="SortListing"></control>
            <view-list :list="searchList" v-show="!flag"></view-list>
            <grid-view :list="searchList" v-show="flag"></grid-view>
        </div>
     
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list:[{
                name:"test2.txt",
                id:2
            },{
                name:"test1.txt",
                id:1
            },{
                name:"test4.txt",
                id:4
            },{
                name:"test3.txt",
                id:3
            },{
                name:"testtest5.txt",
                id:5
            }],
            flag:true,
            searchString: '',
            flag1:true
        },
        computed: {
                searchList() {
                    return this.list.filter(item => item.name.includes(this.searchString))
                }
            },
     created(){
           this.sortList()
        },
        methods:{
            viewChange(e){
                this.flag=e
            },
            fatherData(e) {
                    this.searchString = e
                },
                SortListing(){
                    this.flag1=!this.flag1
                    if(this.flag1){
                        this.list.sort(function paixv(a, b) { return b.id - a.id })  /*   a-b  从小到大排序    b-a  从大到小排序 */
                    }else{
                        this.list.sort(function paixv(a, b) { return a.id - b.id })  /*   a-b  从小到大排序    b-a  从大到小排序 */
                    }
                  
                },
            sortList(){
               
              
               let t;
                for(var i=0;i< this.list.length-1;i++){
                //    console.log(i);
                    for(var j=0;j< this.list.length-1;j++){
                        if( this.list[j].id> this.list[j+1].id){
                            console.log( this.list[j].id);
                            t= this.list[j]
                            this.list[j]= this.list[j+1]
                            this.list[j+1]=t
                        }
                    }
                }
            }
        },
    
       
    })
    </script>
</body>
</html>